home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus / contractible-headers.izs < prev    next >
Text File  |  2005-09-02  |  9KB  |  276 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Contractible Headers Script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> A script that makes selected headers in a page contractible. Contents such as text, graphics, tables etc can be hidden inside the header that will be revealed only when the header is clicked on. 
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>drop down menus<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below into the <head> section of your page: -->
  16. <script type="text/javascript">
  17.  
  18. /***********************************************
  19. * Contractible Headers script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  20. * This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
  21. * Visit http://www.dynamicdrive.com/ for full source code
  22. ***********************************************/
  23.  
  24. var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
  25. var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
  26.  
  27. if (document.getElementById){
  28. document.write('<style type="text/css">')
  29. document.write('.switchcontent{display:none;}')
  30. document.write('</style>')
  31. }
  32.  
  33. function getElementbyClass(classname){
  34. ccollect=new Array()
  35. var inc=0
  36. var alltags=document.all? document.all : document.getElementsByTagName("*")
  37. for (i=0; i<alltags.length; i++){
  38. if (alltags[i].className==classname)
  39. ccollect[inc++]=alltags[i]
  40. }
  41. }
  42.  
  43. function contractcontent(omit){
  44. var inc=0
  45. while (ccollect[inc]){
  46. if (ccollect[inc].id!=omit)
  47. ccollect[inc].style.display="none"
  48. inc++
  49. }
  50. }
  51.  
  52. function expandcontent(cid){
  53. if (typeof ccollect!="undefined"){
  54. if (collapseprevious=="yes")
  55. contractcontent(cid)
  56. document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
  57. }
  58. }
  59.  
  60. function revivecontent(){
  61. contractcontent("omitnothing")
  62. selectedItem=getselectedItem()
  63. selectedComponents=selectedItem.split("|")
  64. for (i=0; i<selectedComponents.length-1; i++)
  65. document.getElementById(selectedComponents[i]).style.display="block"
  66. }
  67.  
  68. function get_cookie(Name) { 
  69. var search = Name + "="
  70. var returnvalue = "";
  71. if (document.cookie.length > 0) {
  72. offset = document.cookie.indexOf(search)
  73. if (offset != -1) { 
  74. offset += search.length
  75. end = document.cookie.indexOf(";", offset);
  76. if (end == -1) end = document.cookie.length;
  77. returnvalue=unescape(document.cookie.substring(offset, end))
  78. }
  79. }
  80. return returnvalue;
  81. }
  82.  
  83. function getselectedItem(){
  84. if (get_cookie(window.location.pathname) != ""){
  85. selectedItem=get_cookie(window.location.pathname)
  86. return selectedItem
  87. }
  88. else
  89. return ""
  90. }
  91.  
  92. function saveswitchstate(){
  93. var inc=0, selectedItem=""
  94. while (ccollect[inc]){
  95. if (ccollect[inc].style.display=="block")
  96. selectedItem+=ccollect[inc].id+"|"
  97. inc++
  98. }
  99.  
  100. document.cookie=window.location.pathname+"="+selectedItem
  101. }
  102.  
  103. function do_onload(){
  104. uniqueidn=window.location.pathname+"firsttimeload"
  105. getElementbyClass("switchcontent")
  106. if (enablepersist=="on" && typeof ccollect!="undefined"){
  107. document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
  108. firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
  109. if (!firsttimeload)
  110. revivecontent()
  111. }
  112. }
  113.  
  114.  
  115. if (window.addEventListener)
  116. window.addEventListener("load", do_onload, false)
  117. else if (window.attachEvent)
  118. window.attachEvent("onload", do_onload)
  119. else if (document.getElementById)
  120. window.onload=do_onload
  121.  
  122. if (enablepersist=="on" && document.getElementById)
  123. window.onunload=saveswitchstate
  124.  
  125. </script>
  126. <!-- Step 2: Finally, insert the below example HTML anywhere inside the <body> section of your page: -->
  127. <h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
  128. <div id="sc1" class="switchcontent">
  129. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  130. </div>
  131.  
  132. <h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript?</h3>
  133. <div id="sc2" class="switchcontent">
  134. Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
  135. </div>
  136.  
  137. <h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>
  138. <div id="sc3" class="switchcontent">
  139. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  140. </div>
  141. <!-- END OF SCRIPT -->
  142. <!/SCRIPT>
  143.  
  144. <!PREVIEW>
  145. <!-- START OF SCRIPT -->
  146.  
  147. <!-- Step 1: Insert the below into the <head> section of your page: -->
  148. <script type="text/javascript">
  149.  
  150. /***********************************************
  151. * Contractible Headers script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  152. * This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
  153. * Visit http://www.dynamicdrive.com/ for full source code
  154. ***********************************************/
  155.  
  156. var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
  157. var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
  158.  
  159. if (document.getElementById){
  160. document.write('<style type="text/css">')
  161. document.write('.switchcontent{display:none;}')
  162. document.write('</style>')
  163. }
  164.  
  165. function getElementbyClass(classname){
  166. ccollect=new Array()
  167. var inc=0
  168. var alltags=document.all? document.all : document.getElementsByTagName("*")
  169. for (i=0; i<alltags.length; i++){
  170. if (alltags[i].className==classname)
  171. ccollect[inc++]=alltags[i]
  172. }
  173. }
  174.  
  175. function contractcontent(omit){
  176. var inc=0
  177. while (ccollect[inc]){
  178. if (ccollect[inc].id!=omit)
  179. ccollect[inc].style.display="none"
  180. inc++
  181. }
  182. }
  183.  
  184. function expandcontent(cid){
  185. if (typeof ccollect!="undefined"){
  186. if (collapseprevious=="yes")
  187. contractcontent(cid)
  188. document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
  189. }
  190. }
  191.  
  192. function revivecontent(){
  193. contractcontent("omitnothing")
  194. selectedItem=getselectedItem()
  195. selectedComponents=selectedItem.split("|")
  196. for (i=0; i<selectedComponents.length-1; i++)
  197. document.getElementById(selectedComponents[i]).style.display="block"
  198. }
  199.  
  200. function get_cookie(Name) { 
  201. var search = Name + "="
  202. var returnvalue = "";
  203. if (document.cookie.length > 0) {
  204. offset = document.cookie.indexOf(search)
  205. if (offset != -1) { 
  206. offset += search.length
  207. end = document.cookie.indexOf(";", offset);
  208. if (end == -1) end = document.cookie.length;
  209. returnvalue=unescape(document.cookie.substring(offset, end))
  210. }
  211. }
  212. return returnvalue;
  213. }
  214.  
  215. function getselectedItem(){
  216. if (get_cookie(window.location.pathname) != ""){
  217. selectedItem=get_cookie(window.location.pathname)
  218. return selectedItem
  219. }
  220. else
  221. return ""
  222. }
  223.  
  224. function saveswitchstate(){
  225. var inc=0, selectedItem=""
  226. while (ccollect[inc]){
  227. if (ccollect[inc].style.display=="block")
  228. selectedItem+=ccollect[inc].id+"|"
  229. inc++
  230. }
  231.  
  232. document.cookie=window.location.pathname+"="+selectedItem
  233. }
  234.  
  235. function do_onload(){
  236. uniqueidn=window.location.pathname+"firsttimeload"
  237. getElementbyClass("switchcontent")
  238. if (enablepersist=="on" && typeof ccollect!="undefined"){
  239. document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
  240. firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
  241. if (!firsttimeload)
  242. revivecontent()
  243. }
  244. }
  245.  
  246.  
  247. if (window.addEventListener)
  248. window.addEventListener("load", do_onload, false)
  249. else if (window.attachEvent)
  250. window.attachEvent("onload", do_onload)
  251. else if (document.getElementById)
  252. window.onload=do_onload
  253.  
  254. if (enablepersist=="on" && document.getElementById)
  255. window.onunload=saveswitchstate
  256.  
  257. </script>
  258. <!-- Step 2: Finally, insert the below example HTML anywhere inside the <body> section of your page: -->
  259. <h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
  260. <div id="sc1" class="switchcontent">
  261. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  262. </div>
  263.  
  264. <h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript?</h3>
  265. <div id="sc2" class="switchcontent">
  266. Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
  267. </div>
  268.  
  269. <h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>
  270. <div id="sc3" class="switchcontent">
  271. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  272. </div>
  273. <!-- END OF SCRIPT -->
  274. <!/PREVIEW>
  275.  
  276. <!RELATED>NONE<!/RELATED>